<template>
    <div>
        <slider :announcement="announcement" :slides="slides"></slider>
        <booklist :books="books" heading="最近更新" @select="preview($event)"></booklist>
        <booklist :books="books1" heading="编辑推荐" @select="preview($event)"></booklist>

         <modal-dialog ref="dialog">
                    <div slot="heading"></div>
                    <div>
                        <div v-if="selected">
                            <h2>{{ selected.title }}</h2>
                        </div>
                    </div>
                </modal-dialog>
    </div>
</template>
<style>
    .announcement {
        font-size: 12px;
        padding:5px;
        background:#fff;
    }

    .announcement > label {
        padding: 3px 10px;
        margin: 3px 10px;
        background: #FACCB7;
        border-radius: 3px;
        color: #FF5102;

    }

    .announcement > span {
        padding: 3px 10px;
        color: #333;
        display:inline-block;
    }
</style>

<script type="text/ecmascript-6">
    import slider from "./slider.vue"
    import booklist from "./book.vue"
     import ModalDialog from "./dialog.vue"

    export default{
        components: {slider, booklist,ModalDialog},

        data(){
            return{
                books: [],
                books1: [],
                announcement: '',
                slides: [],
                selected:undefined
            }
        },
        created(){
            this.$http.get("./src/data.json").then((res)=> {
                this.books=res.body.books;
                this.books1=res.body.books1;
                this.announcement=res.body.announcement;
                this.slides=res.body.slides;
                console.log("created");
            })
        }
        ,beforeCreate(){
            console.log("beforeCreated")
        }
        ,beforeMount(){
            console.log("beforeMount");
        }
        ,mounted(){
            console.log("mounted");
        }
        ,methods: {
                    preview (book) {
                        this.selected = book
                        this.$refs.dialog.open()
                    }
                }
    }
</script>